<template>
  <div>
    <el-button type="primary" @click="showAddDialog">添加</el-button>

    <el-dialog :title="form.id? '修改商品' : '添加商品'" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="form.number" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:6001/my/goods/fileUpload"
            name="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="form.cid" placeholder="请选择">
            <el-option
              v-for="cl in classify"
              :key="cl.id"
              :label="cl.cname"
              :value="cl.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveGoods">确定</el-button>
      </div>
    </el-dialog>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="id"
        label="ID"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
      ></el-table-column>
      <el-table-column
        prop="price"
        label="商品价格"
      ></el-table-column>
      <el-table-column
        prop="number"
        label="付款人数"
      ></el-table-column>
      <el-table-column label="商品图片" align="center" prop="photo" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.photo" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column
        prop="description"
        label="商品描述"
      ></el-table-column>
      <el-table-column
        prop="fname"
        label="商品分类"
      ></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="shan(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      imageUrl: "",
      form: {
        id: null,
        name: "",
        price: "",
        number: "",
        photo: "",
        description: "",
        cid: null
      },
      dialogFormVisible: false,
      classify: []
    };
  },
  methods: {
    shan(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/my/goods/deleteGoods?id=${id}`)
          .then(res => {
            this.fetchGoodsList();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showAddDialog() {
      this.resetForm();
      this.dialogFormVisible = true;
    },
    showEditDialog(row) {
      this.form = {...row};
      this.imageUrl = row.photo;
      this.dialogFormVisible = true;
    },
    resetForm() {
      this.form = {
        id: null,
        name: "",
        price: "",
        number: "",
        photo: "",
        description: "",
        cid: null
      };
      this.imageUrl = "";
    },
    handleAvatarSuccess(response, file) {
      this.imageUrl = response;
      this.form.photo = response;
    },
    beforeAvatarUpload(file) {
      // 这里可以添加文件类型和大小的验证
      return true;
    },
    saveGoods() {
      const url = this.form.id ? `/my/goods/updateGoods` : `/my/goods/addGoods`;
      const method = this.form.id ? "put" : "post";
      axios[method](url, this.form)
        .then(response => {
          console.log(response);
          this.dialogFormVisible = false;
          this.fetchGoodsList();
        })
        .catch(error => {
          console.error("保存商品失败", error);
          // 可以在这里添加提示用户的逻辑，比如使用Element - UI的message组件
        });
    },
    fetchGoodsList() {
      axios.post("my/goods/findGoodsList")
        .then(response => {
          this.tableData = response.data;
        })
        .catch(error => {
          console.error("获取商品列表失败", error);
        });
    },
    fetchClassify() {
      axios.get("/my/classify/selectClassify")
        .then(response => {
          this.classify = response.data;
        })
        .catch(error => {
          console.error("获取商品分类失败", error);
        });
    }
  },
  created() {
    this.fetchGoodsList();
    this.fetchClassify();
  }
};
</script>

<style scoped>
.avatar-uploader.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader {
  text-align: left;
}

.avatar-uploader.el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px solid #d9d9d9;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.pagination {
  text-align: right;
}
</style>
